<script setup lang="ts">

import {ref, watch} from "vue";
import {getEnterpriseInfoApi} from "@/api/path/enterpriseApis";
import {getObj} from "@/utils/obs";
import {ElMessage} from "element-plus";
import EnterpriseBasicInfo from "@/components/enterpriseManage/enterpriseBasicInfo.vue";
import EnterpriseElement from "@/components/common/enterpriseElement.vue";
import {Minus, Plus} from "@element-plus/icons-vue";
import MyButton from "@/components/common/myButton.vue";
import type {enterpriseInfoType} from "@/utils/type";
import {useRouter} from "vue-router";

const router = useRouter()
const props = defineProps({
  id: String,
})
const enterpriseData = ref<enterpriseInfoType>({
  enterpriseName: '',
  enterpriseIntro: '',
  // enterpriseImgSrc: 'https://img95.699pic.com/photo/50136/9491.jpg_wh300.jpg',
  enterpriseClass: '',
  followerNum: 0,
  enterpriseContactWay: '',
});
const imgSrc = ref();
watch(() => props, (newValue) => {
  if (newValue.id) {
    getEnterpriseInfoApi(newValue.id).then((res: any) => {
      if (res.success) {
        enterpriseData.value.enterpriseName = res.name;
        enterpriseData.value.enterpriseIntro = res.intro;
        enterpriseData.value.enterpriseContactWay = res.contactWay;
        getObj(res.imageKey, imgSrc);
        // getObj(res.enterpriseImgKey, imgSrc);
        enterpriseData.value.enterpriseClass = res.class;
        enterpriseData.value.followerNum = res.followCount;
      }
      else {
        ElMessage.error(res.msg);
      }
    })
  }
},{deep: true, immediate: true})
</script>

<template>
  <span class="e-wrapper">
<!--    <img class="enterpriseImg" :src="imgSrc"/>-->
    <span class="info-wrapper">
      <span class="title" @click="router.push({
      path:'/enterprise',
      query: {
        enterpriseId: props.id
      }
      })">
        {{enterpriseData.enterpriseName}}
      </span>
      <span class="enter-intro">
        {{enterpriseData.enterpriseIntro}}
      </span>
      <span class="detail-group">
<!--        <span v-for="item in enterpriseData.enterpriseClass" :key="item" class="detail-info">-->
        <!--          {{item}}-->
        <!--        </span>-->
        <span class="detail-info">
          {{enterpriseData.enterpriseClass}}
        </span>
        <span class="detail-info">
          {{enterpriseData.followerNum}}
          位关注者
        </span>
        <span class="detail-info last">
          联系我们<span style="margin-left: 2px; margin-right: 2px">:</span>
          {{enterpriseData.enterpriseContactWay}}
        </span>
      </span>
    </span>
  </span>
</template>

<style scoped>
.e-wrapper {
  display: flex;
  /*height: 300px;*/
  padding: 20px 20px 0 20px;
  width: 100%;
  flex-direction: column;
  &::after {
    content: '';
    height: 1px;
    width: 100%;
    background-color: var(--color-border);
    position: relative;
    bottom: 0;
  }
  .info-wrapper {
    /*margin-top: 50px; !*把企业头像避开*!*/
    /*margin-left: 30px;*/
    display: flex;
    flex-direction: column;
    width: 100%;
    .title {
      font-size: 36px;
      font-weight: 700;
      &:hover {
        cursor: pointer;
        color: var(--color-primary);
        text-decoration: underline;
      }
    }
    .enter-intro {
      font-size: var(--font-size-base);
    }
    .detail-group {
      .detail-info {
        color: grey;
        font-size: var(--font-size-small);
        &:not(.last)::after {
          content: '·';
          position: relative;
          padding: 0 5px
        }
      }
    }
  }
}
</style>